import React, {useContext, useEffect, useState} from "react";
import {Icon, Overlay} from "react-native-elements";
import {Dimensions, ImageBackground, View, Text, TouchableOpacity} from "react-native";
import BG from '../assets/redEnvelopeIndex/RedEnvelopeAlertBG.png'
import {formartMoney, toDecimal2} from "../libs/helpers";
import LocaleContext from "../libs/locale";
import AsyncStorage from "@react-native-async-storage/async-storage";

const {width, height} = Dimensions.get("window");

const RedEnvelopeAlert = ({visible,back,num,pkgid,total,coinname}:any) => {
    const locale: any = useContext(LocaleContext);
    const BGheight = width*0.85*1.6624;

    const [lang, setLang] = useState("zh");

    useEffect(()=>{
        const work = async () => {
            const lang = await AsyncStorage.getItem('@lang');

            setLang(lang as any);
        }
        work();
    })

    return(
        visible?(
                <View style={{marginTop:-height*0.95,height:height,width:width,backgroundColor:"#0000009E",alignItems:"center"}}>
                    <ImageBackground source={BG} style={{width:width*0.85,height:BGheight,marginTop:height*0.1}}>
                        <Text style={{marginTop:BGheight*0.35,alignSelf:"center",fontSize:width/360*18,color:"white"}}>
                            {locale._("RedEnvelopeAlert.Ready")}
                        </Text>
                        <TouchableOpacity style={{backgroundColor:"#f9e4af",width:width*0.55,height:BGheight*0.1,
                                          marginTop:BGheight*0.05,alignSelf:"center",borderRadius:BGheight*0.05,justifyContent:"center"}}
                                          onPress={()=>back(true)}
                        >
                            <Text style={{alignSelf:"center",fontSize:width/360*18}}>
                                {locale._("RedEnvelopeAlert.CopyPass")}
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{backgroundColor:"#f9e4af",width:width*0.55,height:BGheight*0.1,
                                          marginTop:BGheight*0.03,alignSelf:"center",borderRadius:BGheight*0.05,justifyContent:"center"}}
                                          onPress={()=>back(false)} >
                            <Text style={{alignSelf:"center",fontSize:width/360*18}}>
                                {locale._("RedEnvelopeAlert.Back")}
                            </Text>
                        </TouchableOpacity>
                        {
                            lang=='zh'?
                                <Text style={{alignSelf:"center",marginTop:BGheight*0.04,fontSize:width/360*15,color:"yellow",letterSpacing:width/360*2}}>
                                    ---------- {locale._("RedEnvelopeAlert.Info")} ----------
                                </Text>
                                :
                                <Text style={{alignSelf:"center",marginTop:BGheight*0.04,fontSize:width/360*15,color:"yellow",letterSpacing:width/360*2}}>
                                    -- {locale._("RedEnvelopeAlert.Info")} --
                                </Text>
                        }

                        <View style={{alignSelf:"center"}}>
                            <Text style={{fontSize:width/360*15,marginTop:BGheight*0.025,color:"yellow"}}>
                                {locale._("RedEnvelopeAlert.Num")}：{num}
                            </Text>
                            <Text style={{fontSize:width/360*15,marginTop:BGheight*0,color:"yellow",}}>
                                {locale._("RedEnvelopeAlert.Total")}：{toDecimal2(total)} {coinname || "SAT"}
                            </Text>
                            <Text style={{fontSize:width/360*15,marginTop:BGheight*0,color:"yellow",}}>
                                {locale._("RedEnvelopeAlert.Password")}：{pkgid}
                            </Text>
                        </View>

                    </ImageBackground>
                    {/*<TouchableOpacity style={{marginTop:height*0.02}} onPress={()=>back(false)}>*/}
                    {/*    <Icon type='font-awesome-5' name="window-close" color={'#f44537'} size={width/360*40} />*/}
                    {/*</TouchableOpacity>*/}
                    {/*<View style={{marginTop:height*0.2,width:width*0.85,height:height*0.6,backgroundColor:"#e3280a",borderRadius:width*0.03}}>*/}
                    {/*    <View style={{marginTop:15,marginLeft:15,width:width*0.85-30,height:height*0.6-30,backgroundColor:"#f64734",borderRadius:0}}>*/}

                    {/*    </View>*/}

                    {/*</View>*/}

                </View>

            )
            :null
    )
};
export default RedEnvelopeAlert;
